﻿/* Media query for mobile viewport */
@include media-breakpoint-down(sm) {
    .paypal-button-container {
        width: 100%;
        /* On payment selection page we need some padding & alignment */
        .checkout-page:not(.order-summary-page) & {
            align-self: center;
            padding-inline-start: 10px;
        }
    }
}

/* Media query for desktop viewport */
@include media-breakpoint-up(md) {
    .paypal-button-container .paypal-buttons {
        width: 200px !important;
    }
}

.addon-buttons {
    .paypal-button-container .paypal-buttons {
        width: 100% !important;
        display: block !important;
    }
}